<template>
  <div class="home">
    <input type="text" v-model="title" /> <button @click="add">add</button>
    <ul class="nav">
      <li
        v-for="(item, index) in cate"
        :key="index"
        :class="{ bg: flag == index }"
        @click="change(index)"
      >
        {{ item }}
      </li>
    </ul>

    <ul class="con">
      <div>
        <h1>正在看的书籍</h1>
        <button @click="sorttime">时间排序</button>
      </div>
      <li
        v-for="(item, index) in list"
        :key="item.id"
        v-show="item.cid == flag"
        @mouseenter="show = index"
        :class="{ bg2: index == show }"
      >
        <input
          v-if="num == index"
          type="text"
          v-model="item.title"
          @keydown.enter="edit(item.title)"
        />
        <span v-else @dblclick="num = index"> {{ item.title }}</span>

        <span>{{ item.time | filtime }}</span>
        <button v-show="index == show" @click="remove(index)">删除</button>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      flag: 0,
      //点击哪一个tab栏
      show: -1,
      //鼠标移到内容的li谁身上
      num: -1,
      //保存双击修改的下标
      cate: ["书籍", "电影", "游戏", "综艺", "体育"],
      list: [
        {
          title: "三国演义",
          id: 1,
          cid: 0,
          cate: "书籍",
          time: new Date(),
        },
        {
          title: "太极张三丰",
          id: 2,
          cid: 1,
          cate: "电影",
          time: new Date(),
        },
        {
          title: "王者荣耀",
          id: 3,
          cid: 2,
          cate: "游戏",
          time: new Date(),
        },
        {
          title: "王牌对王牌",
          id: 4,
          cid: 3,
          cate: "综艺",
          time: new Date(),
        },
        {
          title: "nba",
          id: 5,
          cid: 4,
          cate: "体育",
          time: new Date(),
        },
      ],
      title: "",
    };
  },
  mounted() {
    if (localStorage.getItem("list")) {
      this.list = JSON.parse(localStorage.getItem("list"));
    }
  },
  methods: {
    change(index) {
      this.flag = index;
    },
    add() {
      if (this.title == "") {
        alert("请输入内容");
        return false;
      }

      let arr = this.list.filter((item) => {
        return item.title == this.title;
      });

      if (arr.length > 0) {
        alert("不能重复添加");
        return false;
      }

      this.list.push({
        id: this.list.length + 1,
        title: this.title,
        cid: this.flag,
        time: new Date(),
      });
      this.title = "";
    },
    remove(i) {
      this.list.splice(i, 1);
    },
    edit(title) {
      if (title == "") {
        alert("不能为空");
        return false;
      }
      this.num = -1;
    },
    sorttime() {
      this.list.sort((a, b) => {
        console.log(a.time, b.time);
        return new Date(b.time) - new Date(a.time);
      });
    },
    //时间排序
  },
  watch: {
    list: {
      handler(newval) {
        localStorage.setItem("list", JSON.stringify(newval));
      },
    },
  },
  filters: {
    filtime(val) {
      let time = new Date(val);
      let year = time.getFullYear();
      let month = time.getMonth() + 1;
      let day = time.getDay();

      let hour = time.getHours();
      let minu = time.getMinutes();
      let seconds = time.getSeconds();
      return `${year}-${month}-${day} ${hour}:${minu}:${seconds}`;
    },
  },
};
</script>
<style lang="scss" scoped>
.bg {
  background: aqua;
}
.nav {
  width: 500px;
  display: flex;
  margin: 0 auto;
  li {
    flex: 1;
    border: 1px solid #ccc;
  }
}
.con {
  width: 500px;
  border: 1px solid #ccc;
  margin: 0 auto;
  li {
    display: flex;
    justify-content: space-between;
    button {
      // display: none;
    }
  }
  // li:hover {
  //   background: olive;
  //   button {
  //     display: block;
  //   }
  // }
  .bg2 {
    background: olive;
  }
}
</style>
